Adwaita: tweak radial-gradient()'s

radial-gradient()'s are behaving, hence simplify the css.

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index a00def2593400246c71da0a481218afb9808e3c4..430ae8dd5c9dd27ee9b466210ae045b2be89d2e3 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -419,8 +419,8 @@ treeview entry {
 $_dot_color: if($variant=='light', $selected_bg_color,
                                    lighten($selected_bg_color,15%));
 @keyframes needs_attention {
-  from { background-image: radial-gradient($_dot_color 0%, transparentize($_dot_color, 1) 0%); }
-  to { background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color, 1) 70%); }
+  from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
+  to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
 }
 
 %button,
@@ -787,11 +787,9 @@ button {
   // simulates the shadow labels and icons normally have in buttons.
   animation: needs_attention 150ms ease-in;
   $_dot_shadow: _text_shadow_color(); // shadow color
-  $_dot_shadow_r: if($variant == 'light', 70%, 69%); // the radii of the shadow is different in
-                                                     // dark variant to dim the intensity a bit
 
-  background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%),
-                    radial-gradient($_dot_shadow 68%, transparentize($_dot_shadow, 1) $_dot_shadow_r);
+  background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )),
+                    radial-gradient(farthest-side, $_dot_shadow 95%, transparentize($_dot_shadow, 1));
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
 

diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index be410b567c0cdb52782cb454caf1e6d93427cfdd..f1231a9197dc260b7e227a992dc15987317f0177 100644 (file)
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -545,11 +545,11 @@
     @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
   }
 
-  $_small_gradient: radial-gradient(ellipse farthest-side at $p,
+  $_small_gradient: radial-gradient(farthest-side at $p,
                                     $_small_gradient_color 85%,
                                     transparentize($_small_gradient_color, 1));
 
-  $_big_gradient: radial-gradient(ellipse farthest-side at $p,
+  $_big_gradient: radial-gradient(farthest-side at $p,
                                   $_big_gradient_color,
                                   transparentize($_big_gradient_color, 1));
 

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b2c3fb054818da01e956a954213cbd20cff96f66..7f765749eff901fb9c222ce07ad53d6e0a54f7f5 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
  ***********/
 @keyframes needs_attention {
   from {
-    background-image: radial-gradient(#3583d5 0%, rgba(53, 131, 213, 0) 0%); }
+    background-image: radial-gradient(farthest-side, #3583d5 0%, rgba(53, 131, 213, 0) 0%); }
   to {
-    background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%); } }
+    background-image: radial-gradient(farthest-side, #3583d5 95%, rgba(53, 131, 213, 0)); } }
 notebook > header > tabs > arrow, button.titlebutton,
 button {
   min-height: 24px;
@@ -1188,7 +1188,7 @@ button.needs-attention > label,
 .stack-switcher >
 button.needs-attention > image, stacksidebar row.needs-attention > label {
   animation: needs_attention 150ms ease-in;
-  background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%), radial-gradient(rgba(0, 0, 0, 0.82745) 68%, transparent 69%);
+  background-image: radial-gradient(farthest-side, #3583d5 96%, rgba(53, 131, 213, 0)), radial-gradient(farthest-side, rgba(0, 0, 0, 0.82745) 95%, transparent);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   background-position: right 3px, right 2px; }
@@ -3794,7 +3794,7 @@ actionbar > revealer > box {
 scrolledwindow viewport.frame {
   border-style: none; }
 scrolledwindow overshoot.top {
-  background-image: radial-gradient(ellipse farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: top;
@@ -3802,7 +3802,7 @@ scrolledwindow overshoot.top {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.top:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at top, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at top, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: top;
@@ -3810,7 +3810,7 @@ scrolledwindow overshoot.top {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.bottom {
-  background-image: radial-gradient(ellipse farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: bottom;
@@ -3818,7 +3818,7 @@ scrolledwindow overshoot.bottom {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.bottom:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: bottom;
@@ -3826,7 +3826,7 @@ scrolledwindow overshoot.bottom {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.left {
-  background-image: radial-gradient(ellipse farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: left;
@@ -3834,7 +3834,7 @@ scrolledwindow overshoot.left {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.left:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at left, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at left, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: left;
@@ -3842,7 +3842,7 @@ scrolledwindow overshoot.left {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.right {
-  background-image: radial-gradient(ellipse farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: right;
@@ -3850,7 +3850,7 @@ scrolledwindow overshoot.right {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.right:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at right, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at right, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: right;

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 29db4e89fade2632442e66342d57ee1e3e9068b2..78f4caf0b3e08c55df70eb591d5d6919da8d9443 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
  ***********/
 @keyframes needs_attention {
   from {
-    background-image: radial-gradient(#4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
+    background-image: radial-gradient(farthest-side, #4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
   to {
-    background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%); } }
+    background-image: radial-gradient(farthest-side, #4a90d9 95%, rgba(74, 144, 217, 0)); } }
 notebook > header > tabs > arrow, button.titlebutton,
 button {
   min-height: 24px;
@@ -1191,7 +1191,7 @@ button.needs-attention > label,
 .stack-switcher >
 button.needs-attention > image, stacksidebar row.needs-attention > label {
   animation: needs_attention 150ms ease-in;
-  background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%), radial-gradient(rgba(255, 255, 255, 0.76923) 68%, rgba(255, 255, 255, 0) 70%);
+  background-image: radial-gradient(farthest-side, #4a90d9 96%, rgba(74, 144, 217, 0)), radial-gradient(farthest-side, rgba(255, 255, 255, 0.76923) 95%, rgba(255, 255, 255, 0));
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   background-position: right 3px, right 4px; }
@@ -3825,7 +3825,7 @@ actionbar > revealer > box {
 scrolledwindow viewport.frame {
   border-style: none; }
 scrolledwindow overshoot.top {
-  background-image: radial-gradient(ellipse farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at top, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at top, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: top;
@@ -3833,7 +3833,7 @@ scrolledwindow overshoot.top {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.top:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: top;
@@ -3841,7 +3841,7 @@ scrolledwindow overshoot.top {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.bottom {
-  background-image: radial-gradient(ellipse farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at bottom, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: bottom;
@@ -3849,7 +3849,7 @@ scrolledwindow overshoot.bottom {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.bottom:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: bottom;
@@ -3857,7 +3857,7 @@ scrolledwindow overshoot.bottom {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.left {
-  background-image: radial-gradient(ellipse farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at left, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at left, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: left;
@@ -3865,7 +3865,7 @@ scrolledwindow overshoot.left {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.left:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: left;
@@ -3873,7 +3873,7 @@ scrolledwindow overshoot.left {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.right {
-  background-image: radial-gradient(ellipse farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at right, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at right, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: right;
@@ -3881,7 +3881,7 @@ scrolledwindow overshoot.right {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.right:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: right;